<template>
  <div>
    <el-button type="text" @click="dialogFormVisible = true"
      >增加用户</el-button
    >

    <!-- 增加用户 -->
    <el-dialog title="增加新用户" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户余额" :label-width="formLabelWidth">
          <el-input v-model="form.balance" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改用户 -->
    <el-dialog title="修改用户" :visible.sync="dialogFormVisible2">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form2.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" :label-width="formLabelWidth">
          <el-input v-model="form2.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户余额" :label-width="formLabelWidth">
          <el-input v-model="form2.balance" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="用户id" width="70">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名" width="80">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户密码" width="140">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.password }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户余额" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.balance }}</span>
        </template>
      </el-table-column>
       <el-table-column label="用户姓名" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ findOneById(scope.row.id) }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button>

          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <button type="button" @click="send">发送</button>
    <button type="button" @click="test">发送</button>
  </div>
</template>

<script>
export default {
  mounted() {
    //注意构建mapper.xml呀
    //this.updateTable();
    // 初始化 websocket
    //this.init();
  },
  data() {
    return {
      path:"ws://localhost:8080/server/",
      socket:"",
      tableData: [],
      dialogFormVisible: false,
      dialogFormVisible2: false,
      form: {
        name: "",
        password: "",
        balance: "",
      },
      form2: {
        id:"",
        name: "",
        password: "",
        balance: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods:{
    test(){
      this.$axios.post("goods/findAll").then((response) => {
         
        alert("666");
        
          
          
      });


    },
    findOneById(uid){
      let config = {
        headers:{
          "Content-Type":"text/plain"
        }
      }; 
      let uname = "";
      this.$axios.post("users/findOne",uid,config).then((response) => {
         
          let resultVO = response.data;
          uname = resultVO.data.name;
          
          
      });

        
      
      return uname;
     

      
    

    },
    
    updateTable() {
      this.$axios
        .post("users/findAll").then((response) => {
          let resultVO = response.data;
          this.tableData = resultVO.data;
        });
    },
    add() {
      //添加时的校验
      var nameReg = /^[a-zA-Z][a-zA-Z0-9]{4,6}$/;
      let rname = nameReg.test(this.form.name);
      if(!rname){
          this.$message.error("必须是3到6列的字母和数字组成，且不能以数字开头");
          return;
      }
      var passwordReg = /^[\w]{6,12}$/;
      let rpwd = passwordReg.test(this.form.password); 
      if(!rpwd){
          this.$message.error("密码必须是6到12列的数字和字母，且必须同时包含字母和数字");
          return;
      }

      this.$axios.post("users/save", this.form).then((response) => {
        let r = response.data;
        if (r.code == 200) {
          // 关闭窗口
          this.dialogFormVisible = false;
          // 清空增加表单的内容
          this.form.name = this.form.password = this.form.balance  = "";
          this.updateTable();
          // 提示成功
          this.$message({
            message: "恭喜你，增加成功",
            type: "success",
          });
          return;
        }
        // 增加失败...
        this.$message.error("增加失败");
      });
    },
    handleEdit(index, row) {
      this.dialogFormVisible2 = true;
      this.form2.id = row.id;
      this.form2.name = row.name;
      this.form2.password = row.password;
      this.form2.balance = row.balance;
      
    },
    update() {
       //添加时的校验
      var nameReg = /^[a-zA-Z][a-zA-Z0-9]{4,6}$/;
      let rname = nameReg.test(this.form2.name);
      if(!rname){
          this.$message.error("必须是3到6列的字母和数字组成，且不能以数字开头");
          return;
      }
      var passwordReg = /^[\w]{6,12}$/;
      let rpwd = passwordReg.test(this.form2.password); 
      if(!rpwd){
          this.$message.error("密码必须是6到12列的数字和字母，且必须同时包含字母和数字");
          return;
      }
      this.$axios.post("users/update", this.form2).then((response) => {
        let r = response.data;
        if (r.code == 200) {
          // 关闭窗口
          this.dialogFormVisible2 = false;
          // 更新表格 要传当前页码
          this.updateTable();
          // 提示成功
          this.$message({
            message: "恭喜你，修改成功",
            type: "success",
          });
          return;
        }
        // 修改失败...
      });
    },
    handleDelete(index, row) {
      let config = {
        headers: {
          "Content-Type": "text/plain",
        },
      };
      this.$axios
        .post("/users/delete", row.id + "", config)
        .then((response) => {
          let r = response.data;
          let msg = "确定要删除吗?";
          if (confirm(msg) == false) {
            return;
          }
          if (r.code == 200) {
            // 更新表格，如果当前页面只有一行数据，则删除后应查询它前一页
            //还应该保证页数不为负
            this.updateTable();
            // 提示成功
            this.$message({
              message: "恭喜你，删除成功",
              type: "success",
            });
            return;
          }

          // 删除失败
          this.$message.error("错了哦，删除失败");
        });
    },
     init: function () {
          if(typeof(WebSocket) === "undefined"){
              alert("您的浏览器不支持socket")
          }else{
              // 实例化socket
              this.socket = new WebSocket(this.path+"1");
              // 监听socket连接
              this.socket.onopen = this.open;
              // 监听socket错误信息
              this.socket.onerror = this.error;
              // 监听socket消息
              this.socket.onmessage = this.getMessage;
          }
      },
      open: function () {
          console.log("socket连接成功")
      },
      error: function () {
          console.log("连接错误")
      },
      getMessage: function (msg) {
          console.log(msg.data)
      },
      send: function () {
          let user = new Object();
          user.toUserId = "5";
            user = JSON.stringify(user);
          this.socket.send(user);
      },
      close: function () {
          console.log("socket已经关闭")
      },
  
    
    destroyed () {
        // 销毁监听
        this.socket.onclose = this.close
    },
   
  },
}
</script>

<style>
</style>